<template>
  <div class="page-box">
    <div class="ticketList-top-btn">
      <el-button @click="downTem()" icon="el-icon-download">模板下载</el-button>
      <el-button v-if="!showTicketLoding" @click="copyVal='';copyAlert=true" icon="el-icon-download">导入国内票</el-button>
    </div>
    <!-- 展示票弹框 -->
    <el-table ref="multipleTableTicket" :border="true" :data="copyList" style="width: 100%">
      <el-table-column width="60px" type="index" align="center">
      </el-table-column>
      <el-table-column prop="name0" align="center" label="门票类型ID">
      </el-table-column>
      <el-table-column prop="name1" align="center" label="姓名">
      </el-table-column>
      <el-table-column prop="name2" align="center" label="手机号">
      </el-table-column>
      <el-table-column prop="name3" align="center" label="邮箱">
      </el-table-column>
      <el-table-column prop="name4" align="center" label="身份证">
      </el-table-column>
      <el-table-column prop="name5" align="center" label="职位">
      </el-table-column>
      <el-table-column prop="name6" align="center" label="公司名称">
      </el-table-column>
      <el-table-column prop="name7" align="center" label="行业">
      </el-table-column>
      <el-table-column prop="name8" align="center" label="公司规模">
      </el-table-column>
      <el-table-column prop="name9" align="center" label="备注">
      </el-table-column>
      <el-table-column prop="name10" align="center" label="价格组ID">
      </el-table-column>
      <el-table-column align="center" label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status===true" type="success">成功</el-tag>
          <el-tag v-if="scope.row.status===false" type="danger">失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="msg" align="center" label="提示">
      </el-table-column>
    </el-table>
    <div class="bottom-btn">
      <el-button v-if="showTicketLoding" @click="isZhatTing=!isZhatTing">{{isZhatTing?"继续":"暂停"}}</el-button>
      <el-button v-if="!isyes" :loading="showTicketLoding" @click="sureCopyTicket()" type="primary">开始导入</el-button>
      <el-button v-else @click="sureCopyTicket()" type="primary">开始导入</el-button>
    </div>
    <!-- 导内入门票 -->
    <el-dialog title="导入门票 " :visible.sync="copyAlert" width="860px">
      <el-input type="textarea" :autosize="{ minRows: 10, maxRows: 13}" placeholder="请输入内容" v-model="copyVal">
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="copyAlert = false">取 消</el-button>
        <el-button type="primary" @click="isyes=false;showTicketLoding=false;copyValFun()">下一步</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import servicePub from "@/api/servicePub";
import { idCardReg } from "./../../components/js/idCardReg.js";
export default {
  data() {
    return {
      errorData: [],
      isyes: false, //是否完全导入完成
      isZhatTing: false, //是否暂停
      ifNext: false, //是否开始进行下一条
      thisNum: 0, //当前进行到哪一一条
      sum: 0, //总条数
      isImportant: false, //是否开始导入
      showTicketLoding: false,
      copyList: [], //复制的票列表
      copyVal: "", //票导入内容
      copyAlert: false //复制弹框，
    };
  },
  methods: {
    sureCopyTicket() {
      if (this.isyes) {
        this.$message({
          message: "请重新复制输入信息进行导入",
          type: "warning"
        });
        return;
      }
      if (this.copyList.length == 0) {
        this.$message({
          message: "请至少输入一项",
          type: "warning"
        });
        return;
      }
      this.isyes = false;
      this.showTicketLoding = true;
      this.sum = this.copyList.length;
      this.thisNum = 0;
      this.ifNext = true;
      let t = this;
      let time = setInterval(() => {
        this.inporticket();
        if (this.thisNum >= this.sum - 1) {
          this.showTicketLoding = false;
          this.ifNext = false;
          this.isyes = true;
          clearInterval(time);
        }
      }, 500);
    },
    // 开始导入
    inporticket(val) {
      let errorData = [];
      if (this.isZhatTing) {
        return;
      }
      if (!this.ifNext) {
        return;
      }
      this.ifNext = false;
      let subData = {
        activityId: this.$store.state.activityId.thisActivityId,
        ticketTypeId: this.copyList[this.thisNum].name0,
        name: this.copyList[this.thisNum].name1,
        mobile: this.copyList[this.thisNum].name2,
        email: this.copyList[this.thisNum].name3,
        idCard: this.copyList[this.thisNum].name4,
        job: this.copyList[this.thisNum].name5,
        company: this.copyList[this.thisNum].name6,
        industry: this.copyList[this.thisNum].name7,
        scale: this.copyList[this.thisNum].name8,
        orderDetail: this.copyList[this.thisNum].name9,
        pricegroupId: Number(this.copyList[this.thisNum].name10),
        isPay: "pay",
        activeType: 0 //0 中文，1英文
      };
      this.$http.post("/api/isv/ticket/importPersonalTicketList", subData).then(
        res => {
          this.ifNext = true;
          if (res.data.success) {
            this.copyList[this.thisNum].status = true;
            this.copyList[this.thisNum].msg = "";
          } else {
            this.copyList[this.thisNum].status = false;
            this.copyList[this.thisNum].msg =
              res.data.errorMsg || res.data.result || "导入失败";
            this.errorData.push(this.copyList[this.thisNum]);
          }
          this.thisNum++;
          console.log(this.thisNum);
          this.errorDataFun();
        },
        err => {
          this.copyList[this.thisNum].status = false;
          this.copyList[this.thisNum].msg = "服务器出小差了";
          this.errorData.push(this.copyList[this.thisNum]);
          this.thisNum++;
          this.ifNext = true;
          console.log(this.thisNum);
          this.errorDataFun();
        }
      );
    },
    //  导入完
    errorDataFun: async function() {
      console.log(JSON.stringify(this.errorData));
      let obj = {
        name0: "门票类型ID",
        name1: "姓名",
        name2: "手机号",
        name3: "邮箱",
        name4: "身份证",
        name5: "职位",
        name6: "公司名称",
        name7: "行业",
        name8: "公司规模",
        name9: "备注",
        name10: "价格组ID",
        status: "状态",
        msg: "提示"
      };
      if (this.thisNum == this.copyList.length) {
        this.errorData.unshift(obj);
        let params = {
          errorType: "导入国内票",
          importInfo: JSON.stringify(this.errorData),
          isPay: "pay",
          isError: 1,
          activityId: this.$store.state.activityId.thisActivityId
        };
        if (this.errorData.length > 1) {
          this.$message({
            message: "正在上传错误报告",
            type: "warning"
          });
          const errorResult = await servicePub.errorFun(params);
        }
      }
    },
    downTem() {
      window.location.href =
        "http://mingyue-cdn.oss-cn-hangzhou.aliyuncs.com/my_portal/imgs/%E4%BB%98%E8%B4%B9%E5%AF%BC%E5%85%A5%E5%9B%BD%E5%86%85%E7%A5%A8%E6%A8%A1%E6%9D%BF.xlsx";
    },
    // 复制导入解析内容
    copyValFun() {
      try {
        if (!this.copyVal) {
          this.$message({
            message: "请输入内容",
            type: "warning"
          });
          return;
        }
        let data = this.copyVal;
        let datas = data.split("\n");
        let rtData = [];
        this.copyList = [];
        let t = this;
        datas.map((item, index) => {
          let rows = item.split("\t");
          if (!rows[0] || !rows[2]) {
            return;
          }
          this.copyList.push({
            name0: rows[0],
            name1: rows[1] || "",
            name2: rows[2].trim(),
            name3: rows[3] || "",
            name4: rows[4] || "",
            name5: rows[5] || "",
            name6: rows[6] || "",
            name7: rows[7] || "",
            name8: rows[8] || "",
            name9: rows[9] || "",
            name10: rows[10] || "",
            status: "",
            msg: ""
          });
        });
        let photoIsAllTrue = true; //手机是否都正确
        let photoIsAllMsg = ""; //错误的提示
        for (let i = 0; i < this.copyList.length; i++) {
          if (isNaN(this.copyList[i].name0)) {
            photoIsAllTrue = false;
            photoIsAllMsg =
              "请确定门票类型ID是否是纯数字或者有空格(查看第" + (i + 1) + "行)";
          }
          if (isNaN(this.copyList[i].name10)) {
            photoIsAllTrue = false;
            photoIsAllMsg =
              "请确定价格组ID是否是纯数字或者有空格(查看第" + (i + 1) + "行)";
          }
          if (isNaN(this.copyList[i].name2)) {
            photoIsAllTrue = false;
            photoIsAllMsg =
              "请确定手机号码是否是纯数字或者有空格(查看第" + (i + 1) + "行)";
          }
          if (this.copyList[i].name2.length != 11) {
            photoIsAllTrue = false;
            photoIsAllMsg =
              "请确定手机号码是否是11位,当前是" +
              this.copyList[i].name2.length +
              "位(查看第" +
              (i + 1) +
              "行)";
          }
          if (!idCardReg(this.copyList[i].name4)) {
            photoIsAllTrue = false;
            photoIsAllMsg =
              "请确定身份证是否有特殊符号,(查看第" + (i + 1) + "行)";
          }
        }
        if (!photoIsAllTrue) {
          this.$message({
            message: photoIsAllMsg || "格式错误！",
            type: "warning"
          });
          this.copyList = [];
        }
        this.copyAlert = false;
      } catch (err) {
        this.copyVal = "";
        this.$message({
          message: "格式解析错误！",
          type: "warning"
        });
      }
    }
  }
};
</script>

<style>
.ticketList-top-btn {
  width: 100%;
  /* border: 1px solid red; */
  height: auto;
  margin: 10px 0px 20px 0px;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
}
.bottom-btn {
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  margin-top: 26px;
}
</style>

